<template>
  <div>
    <div>
      <Model_1>
        {{text}}
      </Model_1>
      <Side>
        <el-tabs :tab-position="tabPosition" style="height: 350px;" @click="message" >
          <el-tab-pane style="width:800px;height: auto" v-for="item in items" :key="item.id" :label="item.name" @click.native.prevent="message(item.name)"><p v-html="item.content"></p>
          </el-tab-pane>
        </el-tabs>
      </Side>
    </div>

  </div>
</template>

<script>
  import Model_1 from "../../../components/content/pre_business/Model_1";
  import User from "../../../components/content/pre_business/User";
  import Side from "../../../components/content/pre_business/Side";
  export default {
    name: "PFrame",
    components: {Model_1,User,Side},
    data() {
      return {
        text:'个人账户建立',
        tabPosition: 'left',
        items: [
          {id:0,name:"个人账户建立",content:"个人学习账户主要用于记录个人持有的学习成果信息、学分认定信息以及相关转换信息等。个人用户在信息平台中填写个人基本信息（或直接从X证书信息管理服务平台中导入），与公民网络身份识别系统对接确认个人基本信息无误，通过人脸识别等手段确认建立账户者与有关信息匹配，即完成账户建立。\n"+
          "\n"+
          "<img style='height: 250px' src='static/p1.jpg'/>"},
          {id:1,name:"学习成果登记",content:"学习者个人登陆个人账户中心，将获得的职业技能等级证书、学历证书等各类学习成果信息进行登记，存入个人学习账户，职业技能等级证书、学历证书等成果可从国家有关信息平台导入。"+
          "\n"+
          "<img src='static/p2.jpg'/>"},
          {id:2,name:"学习成果认定",content:"在个人学习账户中登记的职业技能等级证书成果，如已在学分银行发布的成果目录清单中，平台将自动对账户中的成果进行认定，赋予相应学分。其他学习成果还需要与相关平台对接，核准其真伪。"+
          "\n"+
          "<img src='static/p3.jpg'/>"},
          {id:3,name:"学习成果存储",content:
              "经过认定的个人学习成果，即可存入学分银行，多次存储学习成果即为学习成果积累。个人用户可以登陆学分银行信息平台查询本人学习成果的存储和积累情况。\n"+
          "\n"+
          "<img src='static/p4.jpg'/>"},
          {id:4,name:"学习成果转换",content:
              "职业院校学生获得一定级别的职业技能等级证书，在当前专业学习或按程序进入更高层次学段后，均可按有关院校转换规则申请兑换学分，免修相应课程；取得职业技能等级证书的社会成员在按规定程序进入有关院校接受相关专业学历教育时，可根据证书级别，按有关院校转换规则申请兑换学分，免修相应课程。\n" +
              "\n" +
              "对接受职业院校学历教育取得毕业证书或职业技能等级证书相关课程学分的学生，在参加有关职业技能等级证书考核时，可按有关培训评价组织转换办法和转换规则申请免考相应的证书模块。\n"+
              "\n"+
              "<img src='static/p5.jpg'/>"},
        ]
      };
    },
    methods:{
      message:function (msg) {
        this.text=msg;
      }
    }
  }
</script>

<style scoped>

</style>
